articles

Home / DeveloperSection / Articles / Data Binding in View using MVC

Data Binding in View using MVC

Chris Anderson8194 30-Sep-2011

In this article I am going to explain how to dynamically bind View data in Model and retrieve data from Model in View through Controller.

Before building an application first we have to add the following resource in our MVC application:
1) Controller - HomeController.cs
2) Model  -
 ModelClass.cs
3) View  - Index.aspx, UserPage.aspx

Data Binding in View using MVC

HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FisrtMVCApp.Models;
 
namespace FisrtMVCApp.Controllers
{
    publicclassHomeController : Controller
    {
        //
        // GET: /Home/
 
        publicActionResult Index()
        {
            return View(); //return Index View
        }
 
        [HttpPost]
        publicActionResult UserPage(ModelClass model)
        {
            return View(model); //here we are passing the view along with view data
        }
    }
}
 

 ModelClass.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
 
namespace FisrtMVCApp.Models
{
    publicclassModelClass
    {
        [DisplayName("Enter First Name:")]
        publicstring FirstName
        {
            get;
            set;
        }
 
        [DisplayName("Enter Last Name:")]
        publicstring LastName
        {
            get;
            set;
        }
    }
}
Index.aspx
 <%@PageLanguage="C#"Inherits="System.Web.Mvc.ViewPage<FisrtMVCApp.Models.ModelClass>"%>
<!DOCTYPEhtml>
 
<html>
<headrunat="server">
    <title>Index</title>
</head>
<body>
   <%using (Html.BeginForm("UserPage","Home",FormMethod.Post)) %><%{ %>
    <div>
        <center>
                <h2>Enter Details:</h2>
                <tablestyle="font-family:Calibri"cellpadding="10">
                    <tr>
                        <td> <%: Html.LabelFor(m => m.FirstName) %></td>
                        <td> <%: Html.TextBoxFor(m => m.FirstName) %></td>
                    </tr>
                    <tr>
                        <td><%: Html.LabelFor(m => m.LastName) %></td>
                        <td><%: Html.TextBoxFor(m => m.LastName) %></td>
                    </tr>
                    <tr>
                        <tdcolspan="2"align="center">
                            <inputtype="submit"value="Submit"/>
                        </td>
                    </tr>
                       <% } %>
                </table>
        </center>
    </div>
</body>
</html>
  UserPage.aspx
 <%@PageLanguage="C#"Inherits="System.Web.Mvc.ViewPage<FisrtMVCApp.Models.ModelClass>"%>
 
<!DOCTYPEhtml>
 
<html>
<headrunat="server">
    <title>UserPage</title>
</head>
<body>
    <div>
        <h2>Welcome! <%: Html.Label(ViewData.Model.FirstName) %>//here we retreive the   
                                         data from view, that we pass through controller
                                         data from view, that we pass through controller
              <%: Html.Label(ViewData.Model.LastName) %></h2>
    </div>
</body>
</html>

Press F5 in order to run your application. Enter your First and Last name in textboxes respectively and click on submit button.

Data Binding in View using MVC

It will display your name with Welcome message.

Data Binding in View using MVC



Updated 04-Mar-2020
hi I am software developer at mindstick software pvt. ltd.

Leave Comment

Comments

Liked By